import React from 'react';
import { Tabs as AntdTabs } from 'antd';
import { createStyles } from 'antd-style';

const { TabPane } = AntdTabs;

const useStyles = createStyles(({ token }) => ({
  tabsContainer: {
    backgroundColor: token.colorBgContainer,
    borderRadius: token.borderRadius,
    boxShadow: `0 1px 2px ${token.colorBorderSecondary}`,
    marginBottom: '16px',
    padding: '0 16px',
    transition: 'all 0.3s',
    border: `1px solid ${token.colorBorderSecondary}`,
    '&:hover': {
      boxShadow: `0 3px 6px rgba(0, 0, 0, 0.1)`,
    },
  },
  tabItem: {
    margin: '0 8px',
    '&:first-child': {
      marginLeft: 0,
    },
  },
  customTabs: {
    '& .ant-tabs-nav': {
      marginBottom: 0,
    },
    '& .ant-tabs-tab': {
      padding: '12px 0',
      fontSize: '14px',
      transition: 'all 0.3s',
    },
    '& .ant-tabs-tab-active': {
      fontWeight: 'bold',
    },
    '& .ant-tabs-ink-bar': {
      height: '3px',
      borderRadius: '2px',
    },
  },
}));

interface TabItem {
  key: string;
  label: string;
  children: React.ReactNode;
}

interface TabsProps {
  items: TabItem[];
  activeKey: string;
  onChange: (key: string) => void;
}

const Tabs: React.FC<TabsProps> = ({ items, activeKey, onChange }) => {
  const { styles } = useStyles();

  return (
    <div className={styles.tabsContainer}>
      <AntdTabs activeKey={activeKey} onChange={onChange}>
        {items.map((item) => (
          <TabPane key={item.key} tab={item.label}>
            {item.children}
          </TabPane>
        ))}
      </AntdTabs>
    </div>
  );
};

export default Tabs;